import { Suspense } from "react";
import AsyncDemo from "./components/AsyncDemo";
import { handleSubmit } from "./action";

function Loading() {
  return <p>Loading...</p>;
}

function Content() {
  // 模拟一个错误
  // throw new Error("Simulated error in Content component!");
  return <p>Loaded Content!</p>;
}

export default function SuspensePage() {
  return (
    // 当有请求的时候 进行预渲染
    <>
      <Suspense fallback={<Loading />}>
        <Content />
        <AsyncDemo />
      </Suspense>
      <div>
        <h1>Update Data Example</h1>
        <form action={handleSubmit}>
          <input
            type="text"
            name="newData"
            placeholder="Enter new data"
            className="border p-2"
          />
          <button type="submit" className="bg-blue-500 text-white p-2">
            Update
          </button>
        </form>
      </div>
    </>
  );
}
